<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Dashboard Template for Bootstrap</title>
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/type.css" />
		<style type="text/css">
			.cart-items {
				width: 70%;
				margin-right: 5%;
			}
			
			.cart_info span:first-child {
				font-size: 17px;
			}
			
			.cart_info span:nth-child(2) {
				font-size: 15px;
				color: #ddd;
			}
			
			.cart-header {
				position: relative;
			}
			
			.cart-header2 {
				position: relative;
			}
			/*del*/
			
			.close1,
			.close2 {
				background: url('__PUBLIC__/images/cart/close_1.png') no-repeat 0px 0px;
				cursor: pointer;
				width: 28px;
				height: 28px;
				position: absolute;
				right: 0px;
				top: 0px;
			}
			/*信息位置*/
			
			.cart-item {
				width: 20%;
				float: left;
				margin-right: 5%;
			}
			
			a.continue {
				background: #F9D9BE;
				padding: 10px 20px;
				font-size: 1em;
				color: #000;
				text-decoration: none;
				display: block;
				text-align: center;
				margin-bottom: 2em;
			}
			/*右边框框*/
			
			a.continue:hover {
				background: #E0BD9F;
			}
			
			.price-details {
				border-bottom: 1px solid #DDD9D9;
				padding-bottom: 10px;
			}
			/*右边列表*/
			
			.price-details span {
				width: 50%;
				float: left;
				font-size: 0.8125em;
				color: #000;
				line-height: 1.8em;
			}
			/*--responsive design--*/
			
			@media (max-width:1024px) {
				.cart-items {
					width: 100%;
					margin-right: 0;
				}
			}
		</style>
	</head>

	<body>
		<header>
			<div class="row">
				<div class="col-md-4 col-xs-4"></div>
				<div class="col-md-4 col-xs-4 text-center">
					<h2>购物车</h2></div>
				<div class="col-md-4 col-xs-4"></div>
			</div>
			<div class="row ">
				<div class="col-md-1 col-xs-1"></div>
				<div class="col-md-10 col-xs-10">
					<hr style="border: groove #ddd 1px;">
				</div>
				<div class="col-md-1 col-xs-1"></div>
			</div>
			
		</header>

		<section>
			<div class="container">
				<div class="check_box">
					<div class="col-md-9 cart-items">
						<script>
							$(document).ready(function(c) {
								$('.close1').on('click', function(c) {
									$('.cart-header').fadeOut('slow', function(c) {
										$('.cart-header').remove();
									});
								});
							});
						</script>
						<div class="cart-header">
							<div class="close1"> </div>
							<div class="cart-sec">
								<div class="cart-item ">
									<img src="__PUBLIC__/images/cart/cart_img(1).jpg" class="img-responsive" />
								</div>
								<div class="cart_info">
									<span><a href="#">小米胶囊耳机</a></span><br>
									<span>黑色</span><br>
									<span>69元</span>
								</div>
								<div class="clearfix"></div>
							</div>
						</div><br>

						<script>
							$(document).ready(function(c) {
								$('.close2').on('click', function(c) {
									$('.cart-header2').fadeOut('slow', function(c) {
										$('.cart-header2').remove();
									});
								});
							});
						</script>
						<div class="cart-header2">
							<div class="close2"> </div>
							<div class="cart-sec">
								<div class="cart-item">
									<img src="__PUBLIC__/images/cart/cart_img(1).jpg" class="img-responsive" alt="" />
								</div>
								<div class="cart_info">
									<span><a href="#">小米胶囊耳机</a></span><br>
									<span>黑色</span><br>
									<span>69元</span>
									<div class="clearfix"></div>
								</div>
							</div>

						</div>
					</div>
				</div>

				<div class="col-md-3">
					<a class="continue" href="#">Continue to basket</a>
					<div class="price-details">
						<h3>Price Details</h3>
						<span>Total</span>
						<span>6200.00</span>
						<span>Discount</span>
						<span>---</span>
						<span>Delivery Charges</span>
						<span>150.00</span>
						<div class="clearfix"></div>
					</div>

				</div>
			</div>
		</section>

		<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
		<script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>
	</body>

</html>'__PUBLIC__/images/cart/close_1.png'